<template>
  <div id="app">
    <div id="main">
      <!-- <h1 class="w-628" >首页</h1> -->
      <div class="banner" id="top">
        <div class="img-2000">
          <img src="../assets/images/2018052415331843037.jpg" alt="" />
        </div>
      </div>

      <div class="content-1 w-1400 relative">
        <div class="top">
          <h2>文化活动</h2>
        </div>
        <div class="bottom">
          <a href="#">首页</a>><a href="#">文化乌镇</a>><a href="#">文化活动</a>
        </div>
        <hr />
      </div>
      <div class="content-2 w-1400">
        <h3>近期活动</h3>
        <Swiper>
          <div class="swiper-slide" v-for="item in gallery" :key="item">
            <img :src="item" alt="" width="100%" />
          </div>
        </Swiper>
        <div class="content" v-for="item in list" :key="item">
          <div class="list clearfix">
            <img :src="item.img" alt="" />
            <div class="txt">
              <h2
                title="2021第八届乌镇戏剧节盛年回归！ 青年竞演、古镇嘉年华报名正式启动！"
              >
                {{ item.title }}
              </h2>
              <span>{{ item.list[0] }}</span>
              <span>{{ item.list[1] }}</span>
              <span>{{ item.list[2] }}</span>

              <h4>{{ item.date }}</h4>
              <p>{{ item.startData }}</p>
              <div class="box">
                <div class="box1"></div>
                <div class="box2">了解更多</div>
              </div>
            </div>
          </div>
          <hr />
        </div>
      </div>
      <div class="content-3">
        <div class="w-1400">
          <h3>往期活动</h3>
          <ul>
            <li class="li-1 wrap">
              <div v-for="item in list2" :key="item">
                <img :src="item.img" alt="" />
                <h4
                  class="ellipsis"
                  title="以艺术之名，兴乌镇之实——2019乌镇当代艺术邀请展盛大开幕"
                >
                  {{ item.title }}
                </h4>
                <div class="box">
                  <div class="box1"></div>
                  <div class="box2">了解更多</div>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="gotop">
        <a href="#top">
          <img src="../assets/images/floatbtn2.png" alt="" />
        </a>
      </div>
    </div>
  </div>
</template>
<script>
import Swiper from "@/components/Swiper1.vue";
export default {
  components: { Swiper },
  data() {
    return {
      gallery: [
        "http://www.wuzhen.com.cn/uploads/day/2017102715393423232.jpg",
        "http://www.wuzhen.com.cn/uploads/day/2017102715420196739.jpg",
        "	http://www.wuzhen.com.cn/uploads/day/2017102715422967871.jpg",
      ],
      list: [
        {
          img: "http://www.wuzhen.com.cn/uploads/cultrue/2021051811203248638.jpg",
          title:
            "  2021第八届乌镇戏剧节盛年回归！ 青年竞演、古镇嘉年华报名正式启动！",
          list: ["乌镇戏剧节", "青年竟赛", "古镇嘉年华"],
          date: "2021.5.18",
          startData: "第八届乌镇戏剧节将于2021年10月15日——24日重磅回归！",
        },
        {
          img: "http://www.wuzhen.com.cn/uploads/cultrue/2021051811203248638.jpg",
          title:
            "  2021第八届乌镇戏剧节盛年回归！ 青年竞演、古镇嘉年华报名正式启动！",
          list: ["乌镇戏剧节", "青年竟赛", "古镇嘉年华"],
          date: "2021.5.18",
          startData: "第八届乌镇戏剧节将于2021年10月15日——24日重磅回归！",
        },
        {
          img: "http://www.wuzhen.com.cn/uploads/cultrue/2021051811203248638.jpg",
          title:
            "  2021第八届乌镇戏剧节盛年回归！ 青年竞演、古镇嘉年华报名正式启动！",
          list: ["乌镇戏剧节", "青年竟赛", "古镇嘉年华"],
          date: "2021.5.18",
          startData: "第八届乌镇戏剧节将于2021年10月15日——24日重磅回归！",
        },
        {
          img: "http://www.wuzhen.com.cn/uploads/cultrue/2021051811203248638.jpg",
          title:
            "  2021第八届乌镇戏剧节盛年回归！ 青年竞演、古镇嘉年华报名正式启动！",
          list: ["乌镇戏剧节", "青年竟赛", "古镇嘉年华"],
          date: "2021.5.18",
          startData: "第八届乌镇戏剧节将于2021年10月15日——24日重磅回归！",
        },
        {
          img: "http://www.wuzhen.com.cn/uploads/cultrue/2021051811203248638.jpg",
          title:
            "  2021第八届乌镇戏剧节盛年回归！ 青年竞演、古镇嘉年华报名正式启动！",
          list: ["乌镇戏剧节", "青年竟赛", "古镇嘉年华"],
          date: "2021.5.18",
          startData: "第八届乌镇戏剧节将于2021年10月15日——24日重磅回归！",
        },
        {
          img: "http://www.wuzhen.com.cn/uploads/cultrue/2021051811203248638.jpg",
          title:
            "  2021第八届乌镇戏剧节盛年回归！ 青年竞演、古镇嘉年华报名正式启动！",
          list: ["乌镇戏剧节", "青年竟赛", "古镇嘉年华"],
          date: "2021.5.18",
          startData: "第八届乌镇戏剧节将于2021年10月15日——24日重磅回归！",
        },
      ],
      list2: [
        {
          img: "http://www.wuzhen.com.cn/uploads/cultrue/2019042311211799671.jpg",
          title: "以艺术之名，兴乌镇之实——2019乌镇当代艺术邀请展盛大开幕",
        },
        {
          img: "http://www.wuzhen.com.cn/uploads/cultrue/2019042311211799671.jpg",
          title: "以艺术之名，兴乌镇之实——2019乌镇当代艺术邀请展盛大开幕",
        },
        {
          img: "http://www.wuzhen.com.cn/uploads/cultrue/2019042311211799671.jpg",
          title: "以艺术之名，兴乌镇之实——2019乌镇当代艺术邀请展盛大开幕",
        },
        {
          img: "http://www.wuzhen.com.cn/uploads/cultrue/2019042311211799671.jpg",
          title: "以艺术之名，兴乌镇之实——2019乌镇当代艺术邀请展盛大开幕",
        },
        {
          img: "http://www.wuzhen.com.cn/uploads/cultrue/2019042311211799671.jpg",
          title: "以艺术之名，兴乌镇之实——2019乌镇当代艺术邀请展盛大开幕",
        },
        {
          img: "http://www.wuzhen.com.cn/uploads/cultrue/2019042311211799671.jpg",
          title: "以艺术之名，兴乌镇之实——2019乌镇当代艺术邀请展盛大开幕",
        },
      ],
      flag: true,
    };
  },
};
</script>
<!-- scoped 样式隔离 -->
<style scoped="scoped">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  word-break: break-all;
}

body {
  color: #000000;
  background: #fff;
  font-size: 12px;
}

/*取消链接的下划线且修改字体颜色*/
a {
  color: #000000;
  text-decoration: none;
}

a:hover {
  color: #ba2636;
  text-decoration: underline;
}

ul,
ol {
  list-style: none;
}

/* 图片去上下空隙 */
img {
  border: none;
  vertical-align: middle;
}

/*i标签不倾斜*/
i {
  font-style: normal;
}

/* 鼠标箭头变成小手*/
.pointer {
  cursor: pointer;
}

/* 段落缩进 */
.retract {
  text-indent: 2rem;
}

/* 安全区域 */
.w-1200 {
  margin: 0 auto;
  width: 1200px;
}

.w-1400 {
  margin: 0 auto;
  width: 1400px;
}

.w-1000 {
  margin: 0 auto;
  width: 1000px;
}

.w-628 {
  margin: 0 auto;
  width: 628px;
}

/* 转换为行内块 */
.inline_div {
  display: inline-block;
}

/* 转换为块 */
.block {
  display: block;
}

/*隐藏元素*/
.hide,
.none {
  display: none;
}

/* 省略标记 */
.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* 清除浮动 */
.fl {
  float: left;
}

.fr {
  float: right;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

/* 定位 */
/* 相对定位 */
.relative {
  position: relative;
}

/* 绝对定位 */
.absolute {
  position: absolute;
}

/* 粘性定位 */
.fixed {
  position: fixed;
}

/* fiex布局 */

/* 设置弹性子元素在主轴方向的布局分布 (左右) */
/* 横向 */
.flex {
  display: flex;
  display: -webkit-flex;
}

/*横向换行*/
.wrap {
  display: flex;
  display: -webkit-flex;
  flex-wrap: wrap;
}

/* 右对齐 */
.justify-right {
  display: flex;
  justify-content: flex-end;
}

/*  左对齐（默认） */
.justify-ledt {
  display: flex;
  justify-content: flex-start;
}

/* 居中 */
.justify-center {
  display: flex;
  justify-content: center;
}

/*  两端对齐。且项目间间隔相等 */
.justify-between {
  display: flex;
  justify-content: space-between;
}

/*每个项目两侧间隔相等，所以项目间 间隔 比项目与边框间间隔大一倍 */
.justify-around {
  display: flex;
  justify-content: space-around;
}

/* 项目间间隔与项目与边框间 间隔均匀分配 */
.justify-evenly {
  display: flex;
  justify-content: space-evenly;
}

/* 弹性布局主轴的方向 */
/* (默认值) 主轴水平方向，从左往右 */
.flex-row {
  display: flex;
  flex-direction: row;
}

/* 主轴水平方向的逆方向，从右往左 */
.flex-reverse {
  display: flex;
  flex-direction: row-reverse;
}

/* 主轴为垂直方向，从上往下 */
.flex-column {
  display: flex;
  flex-direction: column;
}

/* 设置弹性子元素侧轴的分布（上下) */
/* 顶对齐平均分布 */
.flex14 {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-start;
}

/* 底对齐平均分布 */
.flex15 {
  display: flex;
  justify-content: space-evenly;
  align-items: flex-end;
}

/* 与父元素垂直中心对齐 */
.flex16 {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

/*三角*/
.sanjiao-top {
  display: inline-block;
  border-bottom: 8px solid #000;
  border-bottom-color: initial;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.sanjiao-bottom {
  display: inline-block;
  border-top: 8px solid #000;
  border-top-color: initial;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
}

.sanjiao-left {
  display: inline-block;
  border-right: 8px solid #000;
  border-right-color: initial;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.sanjiao-right {
  display: inline-block;
  border-left: 8px solid #000;
  border-left-color: initial;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}

.box {
  position: relative;
  /*left: 100%;*/
  overflow: hidden;
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  cursor: pointer;
}

.box1 {
  width: 80px;
  height: 40px;
  position: absolute;
  top: 0;
  left: -80px;
  border-bottom: #f00 3px solid;
}

.box:hover .box1 {
  left: 0px;
  transition: all 1s;
}

.box2 {
  width: 80px;
  height: 40px;
  /*background-color: #f0f;*/
}

.gotop {
  position: fixed;
  right: 50px;
  bottom: 30%;
}

.banner {
  overflow: hidden;
  margin: 0 auto;
  width: 100%;
}

.img-2000 {
  width: 2000px;
  margin: 0 auto;
}

.banner img {
  width: 2000px;
  /* max-width: 100%;
           */
}

.content-1 {
  /* height: 200px; */
  top: -50px;
}

.content-1 .top {
  width: 373px;
  padding: 7px;
  background: rgba(39, 40, 49, 0.75);
  opacity: 5;
  left: 0;
}

.content-1 .top h2 {
  color: #fff;
  font-size: 30px;
  border: solid 2px #fff;
  width: 355px;
  height: 64px;
  padding-left: 20px;
  line-height: 64px;
}

.content-1 .bottom {
  padding-top: 15px;
  padding-bottom: 15px;
  font-size: 14px;
}
.content-2 {
  padding-bottom: 30px;
}
.content-2 > h3 {
  /*padding-top: 32px;*/
  font-size: 36px;
  letter-spacing: 1.29px;
}
.content-2 > .content .list {
  margin-top: 40px;
  margin-bottom: 40px;
}
.content-2 > .content img {
  margin-right: 40px;
  float: left;
  width: 400px;
  height: 250px;
}

.content-2 .content .txt {
  float: right;
}

.content-2 .content .txt h2 {
  font-size: 28px;
  color: #272831;
  letter-spacing: 0.93px;
  line-height: 48px;
}

.content-2 .content .txt > span {
  font-family: "微软雅黑", "Microsoft YaHei", PingFangSC-Regular;
  font-size: 14px;
  color: #7e808a;
  letter-spacing: 0;
  padding: 4px 10px;
  border: 1px solid #7e808a;
  margin-top: 16px;
  display: inline-block;
  margin-right: 8px;
  line-height: 18px;
}

.content-2 .content h4 {
  font-family: Arial, "微软雅黑", "Microsoft YaHei", PingFangSC-Regular;
  font-size: 14px;
  color: #272831;
  letter-spacing: 0.8px;
  margin-top: 24px;
}

.content-2 .content p {
  font-family: Arial, "微软雅黑", "Microsoft YaHei", PingFangSC-Regular;
  font-size: 14px;
  color: #7e808a;
  letter-spacing: 0.62px;
  line-height: 28px;
  margin-top: 7px;
}

.content-3 {
  background-color: #f3f4f8;
}

.content-3 .w-1400 {
  padding-top: 64px;
  padding-bottom: 8px;
}

.content-3 .w-1400 > h3 {
  padding-top: 32px;
  font-size: 36px;
  letter-spacing: 1.29px;
}

.content-3 .w-1400 ul {
  margin-top: 48px;
}

.content-3 ul img {
  width: 400px;
  height: 250px;
  /* vertical-align: middle; */
}

.content-3 ul h4 {
  width: 400px;
  font-family: Arial, "微软雅黑", "Microsoft YaHei", PingFangSC-Regular;
  font-size: 24px;
  color: #272831;
  letter-spacing: 0.8px;
  line-height: 40px;
  margin-top: 20px;
}

.content-3 .w-1400 ul li {
  /* margin-right: 100px; */
  margin-bottom: 56px;
}
.content-3 .w-1400 ul li > div {
  margin-left: 66px;
  margin-bottom: 20px;
}

/* .content-3 .w-1400 > ul li ul li:nth-child(2) {
  margin-right: 100px;
  margin-bottom: 56px;
}

.content-3 .w-1400 > ul li ul li:nth-child(2) {
  margin-bottom: 56px;
} */
</style>